<!-- 搜索栏 -->
<template>
  <div class="searchBar">
    <el-row :gutter="20">
      <el-col :span="4">
        <el-input v-model="from.sourceIp" clearable placeholder="ip地址" size="small"></el-input>
      </el-col>
      <el-col :span="4">
        <el-input v-model="from.sourcePort" clearable placeholder="端口" size="small"></el-input>
      </el-col>
      <el-col :span="4">
        <el-input v-model="from.sourceMac" clearable placeholder="mac地址" size="small"></el-input>
      </el-col>
      <el-col :span="4">
        <el-select v-model="from.actionType" clearable  placeholder="行为类型">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="5">
        <el-button type="primary" size="small" @click="query">查询</el-button>
        <el-button type="primary" size="small" @click="educe">导出</el-button>
      </el-col>
      <el-col :span="8" class="access-time" v-if="accordingTo" >
        <label for="">访问开始时间:</label>
        <el-date-picker
          v-model="value1"
          type="datetimerange"
          style="width: 100%"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd hh:mm:ss"
          @change="timeChoose"
          size="small"
        >
        </el-date-picker>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { defaults } from "js-cookie";
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {
    accordingTo: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    //这里存放数据
    return {
      from: {//表单数据
        sourceIp: null, //IP地址
        sourceMac: null, //mac地址
        sourcePort: null, //端口
        actionType: null, //行为类型
        startTime: null,
        endTime: null,
      },
      options: [  //行为类型选择数据
        {
          value: 1,
          label: "上线",
        },
        {
          value: 2,
          label: "下线",
        },
        {
          value: 3,
          label: "访问",
        },
      ],
      value1:[], //开始结束时间选择数据
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
      //开始时间结束时间选择
      timeChoose(value) {
         if (value) {
           let [start,end] = value;
           this.from.startTime = start;
           this.from.endTime = end
         }else {
           this.from.startTime = null;
           this.from.endTime = null;
         }
         
      },

      //查询
      query() {
        this.$emit('query' , this.from)
      },

      //导出
      educe( ){
          this.$emit('educe')
      }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>

<style lang='scss' scoped>
.searchBar {
  box-shadow: 1px 2px 3px 3px #e4e7ed;
  padding: 10px 20px 20px 20px;
  ::v-deep .el-row {
    .el-col {
      margin-top: 10px;
    }
  }
  .access-time{
    display: flex;
    align-items: center;
    >label{
        min-width: 100px;
       display: inline-block;
    }
  }
}
</style>